import React from 'react';
import { connect } from 'dva';
import { Table, Modal, Button, Form, Input } from 'antd';
import SampleChart from '../../component/SampleChart';

const FormItem = Form.Item;

const namespace = 'book-table-v2';

function mapStateToProps(state) {
  return {
    bookList: state[namespace].bookList,
    bookLoading: state.loading.effects[`${namespace}/queryList`],
    statistic:state[namespace].statistic
  };
}

class BookTableV2 extends React.Component {
  state = {
    visible: false,
    statisticVisible: false,
    id: null,
  };
  componentDidMount() {
    this.props.dispatch({
      type: `${namespace}/queryList`,
    });
  }

  columns = [
    {
      title: 'id',
      dataIndex: 'id',
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '描述',
      dataIndex: 'desc',
    },
    {
      title: '链接',
      dataIndex: 'url',
      render: value => <a href={value}>{value}</a>,
    },
    {
      title: '图表',
      dataIndex: '_',
      render: (_, { id }) => {
        return (
          <Button onClick={() => { this.showStatistic(id); }}>图表</Button>
        );
      },
    }
  ];

  showModal = () => {
    this.setState({ visible: true });
  };

  handleCancel = () => {
    this.setState({
      visible: false,
    });
  }

  handleOk = () => {
    const { dispatch, form: { validateFields } } = this.props;

    validateFields((err, values) => {
      if (!err) {
        
        dispatch({
          type: `${namespace}/addOne`,
          payload: values,
        });
        this.props.form.resetFields();//添加完了重置字段为初始值
        // 重置 `visible` 属性为 false 以关闭对话框
        this.setState({ visible: false });
      }
    });
  }

  showStatistic = (id) => {
    this.props.dispatch({
      type: `${namespace}/getStatistic`,
      payload: id,
    });
    // 更新 state，弹出包含图表的对话框
    this.setState({ id, statisticVisible: true });
  };

  handleStatisticCancel = () => {
    this.setState({
      statisticVisible: false,
    });
  }

  render() {
    const { visible, statisticVisible, id } = this.state;
    const { bookList, bookLoading, form: { getFieldDecorator }, statistic } = this.props

    return (
      <div>
        <Table columns={this.columns} dataSource={bookList} loading={bookLoading} rowKey="id" />
        <Button onClick={this.showModal}>新建</Button>
        <Modal title="新建记录" visible={visible} onOk={this.handleOk} onCancel={this.handleCancel}>
          <Form>
            <FormItem label="名称" colon={false}>
              {getFieldDecorator('name',
                {
                  rules: [{ required: true }],
                  initialValue: '入门到放弃'
                }
              )(<Input />)
              }
            </FormItem>
            <FormItem label="描述">
              {getFieldDecorator('desc', {
                initialValue: '远离编程'
              })(<Input />)
              }
            </FormItem>
            <FormItem label="链接">
              {getFieldDecorator('url',
                {
                  rules: [{ type: 'url' }],
                  initialValue: 'http://www.example.com/books/x'
                }
              )(<Input />)
              }
            </FormItem>
          </Form>
        </Modal>
        <Modal visible={statisticVisible} footer={null} onCancel={this.handleStatisticCancel}>
          <SampleChart data={statistic} />
        </Modal>
      </div>
    );
  }
}

export default connect(mapStateToProps)(Form.create()(BookTableV2));